<template>
    <view>
        <!-- <u-navbar title="订单管理" :is-back="false"></u-navbar> -->
        <view class="tabs u-flex-center u-row-between">
            <view style="width: 100%">
                <u-tabs
                    ref="tabs"
                    :current="current"
                    :list="tabList"
                    bar-height="6"
                    bar-width="50"
                    active-color="#606DCE"
                    font-size="28"
                    inactive-color="#888888"
                    :is-scroll="false"
                    @change="change"
                ></u-tabs>
            </view>
            <!-- <image src="@/static/yCreate/screen.png" mode="widthFix" class="screen" @click="show_screen=true"></image> -->
        </view>
        <mescroll-body
            :sticky="true"
            ref="mescrollRef"
            @init="mescrollInit"
            @down="downCallback"
            @up="upCallback"
        >
            <view class="all">
                <view class="card" v-for="(item, index) in flowList" :key="index">
                    <!-- <view class="shop-message u-flex">
						<image src="@/static/yCreate/shopIcon.png" mode="widthFix"></image>
						<view>{{item.ordergoods.title}}</view>
					</view> -->
                    <view class="top u-flex-center u-row-between">
                        <view>订单号：{{ item.order_no }}</view>
                        <view class="state" style="color: #ff0000" v-if="item.state == 1"
                            >待支付</view
                        >
                        <view class="state" v-if="item.state == 2">待发货</view>
                        <view class="state" style="color: #ff0000" v-if="item.state == 3"
                            >待收货</view
                        >
                        <view class="state" v-if="item.state == 7">已取消</view>
                        <view
                            class="state"
                            style="color: #606dce"
                            v-if="item.state == 4 || item.state == 6"
                            >已完成</view
                        >
                    </view>
                    <view
                        class="u-flex-center u-row-left u-m-t-20"
                        v-for="(_item, _index) in item.ordergoods"
                        @click="goDetail(item.id)"
                    >
                        <image
                            :src="BaseUrl + _item.image"
                            mode="aspectFill"
                            class="head-img"
                        ></image>
                        <view class="cont">
                            <view class="name u-line-2">{{ _item.title }}</view>
                            <view class="u-flex u-row-between u-m-t-30">
                                <view class="price"><text>￥</text>{{ _item.price }}</view>
                                <view class="number">×{{ _item.number }}</view>
                            </view>
                        </view>
                    </view>
                    <!-- v-if="current==2" -->
                    <view
                        class="u-flex-center u-row-between u-p-t-30 u-m-t-30 u-border-top"
                        v-if="item.state == 3 || item.state == 2"
                    >
                        <view class="time" v-if="item.state == 3"
                            >等待客户确认收货，30天后自动收货</view
                        >
                        <view class="time" v-if="item.state == 2">请于3天内发货</view>
                        <view></view>
                        <view class="u-flex-center" v-if="item.state == 2">
                            <!-- <view class="button button1" @click="cancel(item.id)">取消订单</view> -->
                            <view class="button" @click="showPop(item.id)">确认发货</view>
                            <!-- <view class="button" @click="confirm(item.id)">确认收货</view> -->
                        </view>
                    </view>
                </view>
            </view>
        </mescroll-body>
        <u-popup v-model="show_screen" mode="top" border-radius="20">
            <view class="pop">
                <view class="u-p-30">
                    <u-search
                        placeholder="请输入订单号"
                        v-model="keyword"
                        bg-color="#F6F6F6"
                        :show-action="false"
                        @search="search"
                    ></u-search>
                    <view class="u-flex u-p-t-30">
                        <view class="box-item u-flex-center u-m-r-20" @click="show1 = true">
                            <text>{{ this.tabList[this.current].name || "订单状态" }}</text>
                            <image
                                :src="BaseUrl + '/static/yCreate/bot.png'"
                                mode="widthFix"
                            ></image>
                        </view>
                        <view class="box-item u-flex-center" @click="show2 = true">
                            <text>{{
                                this.take ? this.list2[this.take - 1].label : "成交时间"
                            }}</text>
                            <image
                                :src="BaseUrl + '/static/yCreate/bot.png'"
                                mode="widthFix"
                            ></image>
                        </view>
                    </view>
                    <view class="options-item u-border-bottom">
                        <view class="title">创建时间</view>
                        <view class="u-flex u-flex-wrap">
                            <view
                                class="options-box u-flex-center"
                                v-for="(item, index) in timeList"
                                :class="{ 'select-box': timeIdx == index }"
                                @click="checkIdx(index, 1)"
                            >
                                {{ item }}
                            </view>
                        </view>
                    </view>
                    <view class="options-item u-border-bottom">
                        <view class="title">付款时间</view>
                        <view class="u-flex u-flex-wrap">
                            <view
                                class="options-box u-flex-center"
                                v-for="(item, index) in timeList"
                                :class="{ 'select-box': paymentIdx == index }"
                                @click="checkIdx(index, 2)"
                            >
                                {{ item }}
                            </view>
                        </view>
                    </view>
                </view>
                <view class="u-flex">
                    <view class="btn u-flex-center" @click="show_screen = false">取消</view>
                    <view class="btn btn2 u-flex-center" @click="getlist()">确定</view>
                </view>
            </view>
        </u-popup>
        <u-popup v-model="show3" mode="center" border-radius="20">
            <view class="card2">
                <view class="pop-tit">物流信息</view>
                <view
                    class="item u-border-bottom u-flex-center u-row-between"
                    @click="show4 = true"
                >
                    <text>快递公司</text>
                    <text class="right" v-if="!corporation">{{ "请选择" }}</text>
                    <text class="right right2" v-else>{{ corporation }}</text>
                </view>
                <view class="item u-border-bottom u-flex-center u-row-between">
                    <text>快递单号</text>
                    <input
                        type="text"
                        placeholder="请输入快递单号"
                        placeholder-class="ipt-sty"
                        v-model="orderNum"
                    />
                </view>
                <view class="flex pop-button u-row-between">
                    <view class="u-flex-center" @click="show3 = false">取消</view>
                    <view class="u-flex-center b2" @click="confirm()">确定</view>
                </view>
            </view>
        </u-popup>
        <u-select
            v-model="show1"
            :list="tabList"
            @confirm="confirm1($event, 1)"
            label-name="name"
            confirm-color="#606DCE"
        ></u-select>
        <u-select
            v-model="show2"
            :list="list2"
            @confirm="confirm1($event, 2)"
            confirm-color="#606DCE"
        ></u-select>
        <u-select
            v-model="show4"
            :list="list3"
            label-name="name"
            value-name="code"
            @confirm="confirm1($event, 3)"
            confirm-color="#606DCE"
        ></u-select>
        <u-tabbar
            v-model="currentTab"
            @change="changeTab"
            height="55px"
            active-color="#606DCE"
            inactive-color="#888"
            :list="tabsList"
        ></u-tabbar>
    </view>
</template>

<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
import { BaseUrl } from "../../utils/req";
export default {
    mixins: [MescrollMixin], // 使用mixin
    data() {
        return {
            BaseUrl,
            show1: false,
            show2: false,
            show3: false,
            show4: false,
            list2: [
                {
                    value: 1,
                    label: "3天之内",
                },
                {
                    value: 2,
                    label: "3-7天",
                },
                {
                    value: 3,
                    label: "7-30天",
                },
                {
                    value: 4,
                    label: "30天以上",
                },
            ],
            list3: [],
            orderNum: "",
            corporation: "",
            tabList: [
                {
                    name: "待支付",
                    value: 1,
                },
                {
                    name: "待发货",
                    value: 2,
                },
                {
                    name: "待收货",
                    value: 3,
                },
                {
                    name: "已取消",
                    value: 4,
                },
            ],
            timeIdx: 0,
            paymentIdx: 0,
            take: "", //成交时间
            timeList: ["3天之内", "3-7天", "7-30天", "30天以上"],
            show_screen: false,
            keyword: "",
            flowList: [],
            current: 1,
            id: "",
            code: "",
            tabsList: [
                {
                    iconPath: BaseUrl + "/static/wdcp-fl.png",
                    selectedIconPath: BaseUrl + "/static/wdcp-fl-active.png",
                    text: "商品",
                },
                // {
                //     iconPath: BaseUrl + "/static/wdcp-dd.png",
                //     selectedIconPath: BaseUrl + "/static/wdcp-dd-active.png",
                //     text: "订单",
                // },
                // {
                //     iconPath: BaseUrl + "/static/wdcp-sh.png",
                //     selectedIconPath: BaseUrl + "/static/wdcp-sh-active.png",
                //     text: "审核",
                // // },
                // {
                //     iconPath: BaseUrl + "/static/wdcp-yf.png",
                //     selectedIconPath: BaseUrl + "/static/wdcp-yf-active.png",
                //     text: "运费",
                // },
                {
                    iconPath: BaseUrl + "/static/wdcp-wd.png",
                    selectedIconPath: BaseUrl + "/static/wdcp-wd-active.png",
                    text: "我的",
                },
            ],
            currentTab: 1,
        };
    },
    onLoad() {
        this.$u.post("api/shop/get_order_kuaidi").then((res) => {
            this.list3 = res.data;
        });
    },
    onShow() {
        // this.upCallback(1);
        this.getlist();
    },
    methods: {
        showPop(id) {
            this.id = id;
            this.show3 = true;
        },
        confirm1(e, type) {
            if (type == 1) {
                this.current = e[0].value - 1;
                this.mescroll.resetUpScroll();
            } else if (type == 2) {
                this.take = e[0].value;
                this.mescroll.resetUpScroll();
            } else {
                this.code = e[0].value;
                this.corporation = e[0].label;
            }
        },
        checkIdx(index, type) {
            if (type == 1) {
                this.timeIdx = index;
            } else {
                this.paymentIdx = index;
            }
            this.mescroll.resetUpScroll();
        },
        confirm() {
            this.$u
                .post("/api/shop/shop_order_fh", {
                    order_id: this.id,
                    express_name: this.code, //  快递公司
                    express_no: this.orderNum, //   快递单号
                })
                .then((res) => {
                    this.$u.toast(res.msg);
                    if (res.code == 1) {
                        this.show3 = false;
                        this.mescroll.resetUpScroll();
                    }
                });
        },
        upCallback(page) {
            var type = this.current + 1;
            var timeIdx = this.timeIdx == 0 ? "" : this.timeIdx + 1;
            var paymentIdx = this.paymentIdx == 0 ? "" : this.paymentIdx + 1;
            this.mescroll.optUp.textNoMore = "-已经到底啦-";
            this.$u
                .post("/api/shop/shop_order_noun", {
                    page: page.num,
                    // limit: page.size,
                    type: type,
                    create: timeIdx,
                    pay: paymentIdx,
                    take: this.take,
                    keyword: this.keyword,
                })
                .then((res) => {
                    this.mescroll.endBySize(res.data.data.length, res.data.total);
                    if (page.num == 1) this.flowList = []; //如果是第一页需手动制空列表
                    this.flowList = this.flowList.concat(res.data.data); //追加新数据
                })
                .catch(() => {
                    //联网失败, 结束加载
                    this.mescroll.endErr();
                });
        },
        change(index) {
            this.current = index;
            this.mescroll.resetUpScroll();
        },
        changeTab(e) {
            if (e == 0) {
                uni.redirectTo({ url: "/yCreate/pages/goodsManagement" });
            } else if (e == 2) {
                uni.redirectTo({ url: "/wNew/pages/freight" });
            } else if (e == 3) {
                uni.redirectTo({ url: "/wNew/pages/mine" });
            }
            // else if (e == 4) {
            // uni.redirectTo({ url: "/yCreate/pages/reviewOrder" });
            // uni.redirectTo({ url: "/wNew/pages/mine" });
            // }
        },
        getlist() {
            var type = this.current + 1;
            var timeIdx = this.timeIdx == 0 ? "" : this.timeIdx + 1;
            var paymentIdx = this.paymentIdx == 0 ? "" : this.paymentIdx + 1;
            this.$u
                .post("/api/shop/shop_order_noun", {
                    page: 1,
                    // limit: page.size,
                    type: type,
                    create: timeIdx,
                    pay: paymentIdx,
                    take: this.take,
                    keyword: this.keyword,
                })
                .then((res) => {
                    this.mescroll.endBySize(res.data.data.length, res.data.total);
                    this.flowList = []; //如果是第一页需手动制空列表
                    this.flowList = this.flowList.concat(res.data.data); //追加新数据
                });
            this.show_screen = false;
        },
        goDetail(id) {
            uni.navigateTo({
                url: "/yCreate/pages/orderDetailBus?id=" + id + "&shop=shop",
            });
        },
    },
};
</script>

<style lang="scss">
page {
    background-color: #f6f6f6;
}
.tabs {
    position: sticky;
    top: 0;
    z-index: 999;
    background-color: #fff;
    padding: 0 20rpx;
    .screen {
        width: 40rpx;
        height: auto;
    }
}
.all {
    padding: 0 24rpx;
    .card {
        width: 100%;
        margin-top: 18rpx;
        padding: 30rpx 20rpx;
        background: #ffffff;
        border-radius: 10rpx;
        .shop-message {
            font-size: 32rpx;
            image {
                width: 28rpx;
                height: auto;
                margin-right: 10rpx;
            }
        }
        .top {
            // margin: 30rpx 0;
            margin-bottom: 30rpx;
            font-size: 24rpx;
            .state {
                color: #888;
            }
        }
        .head-img {
            width: 160rpx;
            height: 160rpx;
            border-radius: 10rpx;
            margin-right: 20rpx;
            flex-shrink: 0;
        }
        .cont {
            width: 100%;
            .name {
                margin-bottom: 22rpx;
                font-size: 28rpx;
            }
            .content {
                font-size: 24rpx;
                color: #888888;
            }
            .bot {
                margin-top: 40rpx;
                font-size: 26rpx;
                color: #888;
                .price {
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #da0000;
                }
                text {
                    font-size: 32rpx;
                }
            }
            .price {
                font-size: 40rpx !important;
                font-weight: 550;
                color: #ef5205;
                text {
                    font-weight: 500;
                    font-size: 20rpx;
                }
            }
            .number {
                font-size: 28rpx;
                font-weight: bold;
                color: #222222;
            }
        }
    }
}
.time {
    font-size: 24rpx;
    color: #888888;
}
.button {
    margin-left: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 140rpx;
    height: 52rpx;
    background: linear-gradient(135deg, #2bb984 0%, #8cd994 100%);
    border-radius: 40rpx;
    font-size: 24rpx;
    color: #ffffff;
}

.button1 {
    border: 1rpx solid #888888;
    background: #fff;
    color: #888888;
}
.pop {
    .box-item {
        width: 200rpx;
        height: 52rpx;
        background: #f6f6f6;
        border-radius: 40rpx;
        font-size: 24rpx;
        image {
            margin-left: 10rpx;
            width: 20rpx;
            height: auto;
        }
    }
    .options-item {
        padding: 30rpx 0 0 0;
        .title {
            margin-bottom: 20rpx;
            font-size: 28rpx;
            font-weight: bold;
        }
        .options-box {
            margin: 0 30rpx 30rpx 0;
            width: 180rpx;
            height: 52rpx;
            background: #f5f5f5;
            color: #888888;
            border-radius: 40rpx;
            font-size: 24rpx;
        }
        .select-box {
            background: linear-gradient(135deg, #2bb984 0%, #8cd994 100%);
            color: #ffffff;
        }
    }
    .btn {
        width: 50%;
        height: 100rpx;
        background: #f6f6f6;
        font-size: 28rpx;
        font-weight: bold;
    }
    .btn2 {
        background: #606dce;
        color: #ffffff;
    }
}
.card2 {
    width: 600rpx;
    padding: 0 40rpx;
    margin-bottom: 20rpx;
    .pop-tit {
        color: #606dce;
        text-align: center;
        margin-top: 30rpx;
        font-size: 35rpx;
        font-weight: 550;
    }
    .item {
        padding: 40rpx 0;
        font-size: 30rpx;
        input {
            font-size: 30rpx;
            text-align: right;
        }
        .ipt-sty,
        .right {
            font-size: 30rpx;
            color: #b0b0b0;
        }
        .right2 {
            color: #333;
        }
    }
    .pop-button {
        margin-top: 40rpx;
        view {
            width: 48%;
            height: 80rpx;
            border-radius: 40rpx;
            border: 1rpx solid #888;
            color: #888;
        }
        .b2 {
            background-color: #606dce;
            border: none;
            color: #fff;
        }
    }
}
</style>
